<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限视差滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            overflow: hidden;
        }
        .scroll-container{
            height: 100vh;
            position: relative;
        }
        .item{
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transition: 1s ease-in-out;
        }
        .item img{
            position: absolute;
            width: 100%;
            height: 100vh;
            /* object-fit: cover; */
            transition: 1s;
        }
        .item.prev,.item.next{
            /* 设置层级比当前页面高 */
            z-index: 1;
            height: 0;
        }
        .item.next{
            bottom: 0;
        }
        .item.next img{
            bottom: 0;
            transform: translateY(10%);
        }
        .scroll-up .item.prev{
            height: 100%;
        }
        .scroll-down .item.next{
            height: 100%;
        }
        .scroll-down .item.next img{
            transform: translateY(0);
        }
        .scroll-down .item.cur{
            transform: translateY(-10%);
        }
       
        .item.prev img{
            transform: translateY(-10%);
        }
        .scroll-up .item.prev img{
            transform: translateY(0);
        }
        .scroll-up .item.cur{
            transform: translateY(10%);
        }
    </style>
</head>

<body>
   <div class="scroll-container"></div>
   
</body>
</html>
<script>
    const imgs=[
        'https://picsum.photos/400/600?r=1',
        'https://picsum.photos/400/600?r=2',
        'https://picsum.photos/400/600?r=3',
        'https://picsum.photos/400/600?r=4',
        'https://picsum.photos/400/600?r=5',
    ];
    const scrollContainer=document.querySelector('.scroll-container');
    let currentIndex=0;
    function resetElements(){
        scrollContainer.innerHTML='';
        const preIndex=currentIndex-1<0?imgs.length-1:currentIndex-1;
        const nextIndex=currentIndex+1>imgs.length-1?0:currentIndex+1;
        createItem(preIndex).classList.add('prev');
        createItem(currentIndex).classList.add('cur');
        createItem(nextIndex).classList.add('next');
    }
    //创建图片对象
    function createItem(index){
        const imgUrl=imgs[index];
        const item=document.createElement('div');
        item.classList.add('item');
        item.innerHTML= `<img src="${imgUrl}" />`;
        scrollContainer.appendChild(item);
        return item;
    }
    //标识当前是否在动画中
    let isAnimating=false;
    scrollContainer.addEventListener('wheel',(e)=>{
        // 鼠标没有滚动
        if(!e.deltaY){
            return;
        }
        if(isAnimating){
            return;
        }
        isAnimating=true;
        // 鼠标往下滚动
        if(e.deltaY>0){
            scrollContainer.classList.add('scroll-down');
            currentIndex=currentIndex+1>imgs.length-1?0:currentIndex+1;
        }else{
            scrollContainer.classList.add('scroll-up');
            currentIndex=currentIndex-1<0?imgs.length-1:currentIndex-1;

        }
    })
    // 动画结束
    scrollContainer.addEventListener('transitionend',()=>{
        isAnimating=false;
        scrollContainer.classList.remove('scroll-down');
        scrollContainer.classList.remove('scroll-up');
        resetElements();
    })
    resetElements();
</script>



